﻿<div class="@(IsDisabled ? "bg-grey-800 text-grey-400" : "bg-accent2-900 text-grey-100 hover:bg-accent2-700") inline-flex flex-row items-center rounded flex-shrink-0 cursor-pointer transition-colors select-none relative @CssClass"
     @onclick="HandleClick">
    <div class="pl-1 pt-1 pb-0.5">
        <span class="material-icons-outlined text-sm">@Icon</span>
    </div>
    <div class="flex-grow pl-1 pb-0.5 pt-1 text-sm font-bold">
        @Text
    </div>
    <div class="ml-2 pl-0.5 pr-1 pb-0.5 pt-1 border-l border-grey-900">
        <span class="material-icons text-sm">arrow_drop_down</span>
    </div>
    <div class="absolute bg-grey-700 text-grey-100 shadow font-bold text-sm text-right" style="display: @(IsOpen ? "block" : "none"); top: 32px; right: 0; z-index: 1; @(DropdownWidth == null ? "" : $"width: {DropdownWidth}px;")">
        @ChildContent
    </div>
</div>

@code
{
    [Parameter]
    public string Icon { get; set; }

    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public string CssClass { get; set; }

    [Parameter]
    public bool IsDisabled { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public int? DropdownWidth { get; set; }

    private bool IsOpen { get; set; }

    private void HandleClick()
    {
        if (!IsDisabled)
        {
            IsOpen = !IsOpen;
            StateHasChanged();
        }
    }
}